import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import { DeviceAlarm, DeviceManager } from './components';
import CallpoliceManageList from '../callpoliceManage/components/index';
import DeviceClollectionList from './deviceCollectionList/index';
import styles from './index.css';
import { ConnectState } from '@/models/connect';
import { isMenuVisible } from './../../utils/utils';

const { TabPane } = Tabs;

interface DeviceProps {
  dispatch: Dispatch<AnyAction>;
  activeTab: string;
}

@connect(({ device }: ConnectState) => ({
  activeTab: device.activeTab,
}))
class Device extends Component<DeviceProps> {
  // constructor(props: DeviceProps) {
  //   super(props);
  // }
  state = {
    tabArr: [
      { idx: '0', menuId: 'iot:deviceStatistical:view', type: 'device/initDeviceManger' },
      { idx: '1', menuId: 'iot:device:view', type: 'device/deviceClollectionList' },
      { idx: '2', menuId: 'iot:deviceAlam:view', type: 'deviceWarn/deviceWarnedList' },
    ],
    activeTabArr: [],
    activeIdx: '0',
  };
  componentWillMount() {
    const { dispatch } = this.props;
    console.log(this.props.activeTab);
    // dispatch({ type: 'device/getAnalysisData' });
    dispatch({ type: 'device/initDeviceManger' });
    dispatch({ type: 'device/getDeviceTypeNoOptions' });
    let arr = [];
    this.state.tabArr.forEach((e: any) => {
      if (isMenuVisible(e.menuId)) {
        arr.push(e);
      }
    });
    this.setState({ activeTabArr: arr }, () => {
      this.setState({
        activeIdx: this.props.activeTab
          ? this.props.activeTab
          : this.state.activeTabArr.length && this.state.activeTabArr[0].idx,
      });
    });
    // console.log(this.props.activeTab);
  }
  handleTabChange = (type: string) => {
    localStorage.removeItem('page');
    const { dispatch } = this.props;
    dispatch({type: 'device/deviceSearchClear'});
    if (type === '1') {
      dispatch({ type: 'device/clearChildren' });
      dispatch({ type: 'device/filterDeviceCollection', payload: { pageSize: 12 } });
      dispatch({ type: 'device/changeDeviceCollectionList', payload: '' });
    }else if (type === '2') {
      dispatch({ type: this.state.tabArr[+type].type, payload: { pageSize: 10 } });
    } else {
      isMenuVisible('iot:device:selectAll') && dispatch({ type: this.state.tabArr[+type].type });
    }
    dispatch({ type: 'device/setActiveTab', payload: type });
    this.setState({ activeIdx: type });
  };
  render() {
    const { activeTab, deviceCollectionListData } = this.props;
    this.state.activeIdx = this.props.activeTab ? this.props.activeTab : this.state.activeIdx;
    console.log(this.props.activeTab);
    return (
      <div className={styles.container}>
        <Tabs onChange={this.handleTabChange} type="card" activeKey={this.state.activeIdx+''}>
          {isMenuVisible('iot:deviceStatistical:view') && (
            <TabPane tab="设备概览" key="0">
              <DeviceManager />
            </TabPane>
          )}
          {isMenuVisible('iot:device:view') && (
            <TabPane tab="设备列表" key="1">
              <DeviceClollectionList isUpdate={new Date().getTime()} />
            </TabPane>
          )}
          {isMenuVisible('iot:deviceAlam:view') && (
            <TabPane tab="设备报警" key="2">
              {/* <InspectionAnalyses /> */}
              <CallpoliceManageList isUpdate={new Date().getTime()} />
            </TabPane>
          )}
        </Tabs>
      </div>
    );
  }
}

export default Device;
